const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //用于把HTML页面放入内存
// const vueload=require("vue-loader/lib/plugin")
const minicss = require("mini-css-extract-plugin"); //webpack4.0以后的打包css文件
// const optimizecssassetswebpackplugin = require("optimize-css-assets-webpack-plugin"); //压缩如果你使用ui组件库已经压缩的css就别必要了
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const webpackbar = require("webpackbar");
const htmlplugin = new HtmlWebpackPlugin({
  template: path.join(__dirname, "./src/index.html"), //源头文件
  filename: "index.html", //生成首页的文件名称
  minify: {
    removeAttributeQuotes: true,
    collapseWhitespace: true,
  },
});
const css = new minicss({
  //输出css独立文件
  filename: "./static/css/[name].css",
  chunkFilename: "[name].css", //或者id
});
module.exports = {
  //webpack基于node构建的
  mode: "production",
  entry: ["./src/index.js"],
  output: {
    filename: "./static/js/main.[hash:8].js", //通过热加载输出script文件挂载在目录与index.HTML一样
    path: path.resolve(__dirname, "dist"),
  },
  //production 提供了约定大于配置 约定打包文件是src/index ->dist/main
  plugins: [
    htmlplugin,
    //    new vueload() ,
    css,
    new webpackbar(),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, "./static"),
        to: "./static",
        ignore: [".*"],
      },
    ]),
    //    new clernWebpackPlugin('./dist')
  ],
  module: {
    //所以第三方模块的配置规则
    rules: [
      {
        test: /\.js|.jsx$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,

        use: [
          { loader: minicss.loader },
          {
            loader: "css-loader",
            options: { modules: true },
          },
          "sass-loader",
        ],
      },

      // { test:/\.js|\jsx$/,use:[{loader:"babel-loader",options:{cacheDirectory:true}}],exclude:/node_modules/},//一个属性use:"babel-loader"两个是数组
      // // { test:/\.css/,use:['style-loader','css-loader']},
      { test: /\.css$/, use: [{ loader: minicss.loader }, "css-loader"] },
      //     { test:/\.scss/,use:['style-loader',  {loader: "css-loader",
      //     options: {//这个是react的css模块化
      //        modules: {
      //            localIdentName: "[path][name]-[local]-[hash:5]"
      //        }//import css from '路径' console.log(css)会生成模块
      //        //这是react的处理办法 vue就是style里面写scoped
      //        //支持id与class 控制台输出的模块是健对值形式
      //     }//css scss less一样的配置模块化
      //    }]},
      {
        test: /\.(png|jpe?g|gif|svg|jpg)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "static/img/[name].[ext]",
        },
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "static/media/[name].[ext]",
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1024,
          name: "static/fonts/[name].[ext]",
        },
      },
      //    { test:/.vue$/,use:[{loader:"vue-loader"}]},
    ],
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false,
          },
          compress: {
            drop_debugger: true,
            drop_console: true,
          },
        },
      }),
    ],
  },
  devtool: "cheap-module-source-map", //inline把js打包在一个文件里面 hidden分离出来 eval也是分离
  // optimization:{//代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
  //     splitChunks:{
  //         chunks:"all"
  //     }
  // },
  resolve: {
    // 将 `.ts` 添加为一个可解析的扩展名。
    extensions: [".js", ".jsx", ".tsx", ".json"],
  },

  performance: {
    hints: "warning", //false关闭提示 下面设置就没必要了
    //入口起点的最大体积
    maxEntrypointSize: 50000000,
    //生成文件的最大体积
    maxAssetSize: 30000000,
    //只给出 js 文件的性能提示
    assetFilter: function (assetFilename) {
      return assetFilename.endsWith(".js");
    },
  },
};
